AMP Story হল একটি নতুন ধরণের ইন্টারেক্টিভ এবং ভিজ্যুয়ালি আকর্ষণীয় পেজ ডিজাইন যা গুগল AMP (Accelerated Mobile Pages) প্রযুক্তির অংশ হিসেবে এসেছে। AMP Story এর মাধ্যমে আপনি ওয়েব পেজে স্টোরি-স্টাইল কন্টেন্ট তৈরি করতে পারেন, যা ছবি, টেক্সট, ভিডিও এবং এনিমেশন যুক্ত করে মোবাইল ব্যবহারকারীদের জন্য আকর্ষণীয় অভিজ্ঞতা তৈরি করে। এটি বিশেষভাবে ডিজাইন করা হয়েছে যাতে মোবাইল ডিভাইসে দ্রুত লোড হতে পারে এবং ইন্টারঅ্যাক্টিভ উপাদানগুলো ব্যবহারের জন্য উপযুক্ত।
এখানে AMP Story Layout এবং Animation তৈরির জন্য প্রয়োজনীয় পদক্ষেপ এবং উদাহরণ দেওয়া হয়েছে।
AMP Story Layout এবং Animation তৈরি করার জন্য প্রয়োজনীয় পদক্ষেপ
১. AMP Story Layout তৈরির জন্য HTML স্ট্রাকচার
AMP স্টোরি পেজ তৈরি করতে amp-story ট্যাগ ব্যবহার করা হয়, যা AMP পেজের জন্য স্টোরি ফরম্যাটে কন্টেন্ট প্রদর্শন করে। প্রতিটি "পৃষ্ঠা" (Page) এ amp-story-page ট্যাগ ব্যবহার করা হয় এবং এখানে প্রতিটি পৃষ্ঠার কন্টেন্ট নির্ধারণ করা হয়।
<!DOCTYPE html>
<html ⚡>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<title>AMP Story Example</title>
<link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-story-1.0.css">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
</head>
<body>
<amp-story standalone title="AMP Story Example" publisher="Your Publisher Name" publisher-logo-src="https://example.com/logo.png" poster-portrait-src="https://example.com/poster.jpg">
<!-- Page 1 -->
<amp-story-page id="page1">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.com/your-image.jpg" width="720" height="1280" layout="responsive"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Your Story Title</h1>
<p>Some introductory text for your story</p>
</amp-story-grid-layer>
</amp-story-page>
<!-- Page 2 -->
<amp-story-page id="page2">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.com/another-image.jpg" width="720" height="1280" layout="responsive"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Second Page Title</h1>
<p>Text for the second page of the story</p>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>
</body>
</html>বিশদ বর্ণনা:
amp-story: এটি AMP স্টোরি পেজের মূল কন্টেইনার। এখানেstandaloneঅ্যাট্রিবিউটটি পেজের স্বতন্ত্রতা নিশ্চিত করে এবংtitle,publisher, এবংpublisher-logo-srcসহ অন্যান্য মেটাডেটা যোগ করা হয়।amp-story-page: প্রতিটি পৃষ্ঠার জন্য এই ট্যাগ ব্যবহার করতে হয়। এটি AMP স্টোরির একটি একক পৃষ্ঠা হিসেবে কাজ করে।amp-story-grid-layer: এটি কন্টেন্টের জন্য লেয়ার তৈরি করে। আপনি এখানে ভিন্ন ভিন্ন লেয়ার ব্যবহার করে টেক্সট, ইমেজ বা অন্যান্য উপাদান রাখতে পারেন।template="fill": এই লেয়ারটি ছবি বা ব্যাকগ্রাউন্ডে পুরো পৃষ্ঠা জুড়ে প্রদর্শিত হয়।template="vertical": এটি ভরাট বা উল্লম্ব অবস্থানে টেক্সট বা অন্যান্য কন্টেন্ট প্রদর্শন করে।
২. AMP Story Animation (এনিমেশন)
AMP স্টোরিতে এনিমেশন যোগ করার জন্য AMP Animation API ব্যবহার করা হয়। আপনি amp-animation ট্যাগ ব্যবহার করে সহজ এনিমেশন তৈরি করতে পারেন, যা ইন্টারেক্টিভ স্টোরি অভিজ্ঞতা তৈরির জন্য খুব উপকারী। এখানে একটি সাধারণ উদাহরণ দেওয়া হল যেখানে একটি টেক্সট ব্লক এবং একটি ইমেজ এনিমেটেড হবে।
AMP Animation Example
<amp-animation layout="nodisplay" id="anim1">
<script type="application/json">
{
"duration": "1s",
"fill": "forwards",
"animations": [
{
"selector": "#page1 h1",
"keyframes": [
{"opacity": "0", "transform": "translateY(-100px)"},
{"opacity": "1", "transform": "translateY(0)"}
]
},
{
"selector": "#page1 amp-img",
"keyframes": [
{"opacity": "0", "transform": "scale(0.5)"},
{"opacity": "1", "transform": "scale(1)"}
]
}
]
}
</script>
</amp-animation>বিশদ বর্ণনা:
<amp-animation>: এটি এনিমেশন সেট করার জন্য ব্যবহৃত হয়। এখানেdurationব্যবহার করা হয়েছে যাতে এনিমেশনের সময় নির্ধারণ করা যায়, এবংanimationsঅ্যারে নির্ধারণ করে কোন কন্টেন্ট এনিমেটেড হবে এবং কীভাবে।keyframes: এনিমেশনের কী-ফ্রেমে শুরু এবং শেষ অবস্থান নির্ধারণ করা হয়। এটি CSS এর মতো কাজ করে, যেখানে আপনি টেক্সট বা ইমেজের অবস্থান বা স্টাইল পরিবর্তন করতে পারেন।transform: এটা টেক্সট বা ইমেজের স্থানান্তর এবং স্কেলিং পরিচালনা করে।opacity: এটি এনিমেশন দ্বারা উপাদানের স্বচ্ছতা পরিবর্তন করে।
এখানে, প্রথম এনিমেশনটি h1 ট্যাগের টেক্সটকে উপরের থেকে নিচে এনে দৃশ্যমান করে, এবং দ্বিতীয় এনিমেশনটি ইমেজের স্কেল এবং অপাসিটি পরিবর্তন করে।
৩. AMP Story এর এনিমেশন এবং ট্রানজিশন
AMP স্টোরিতে আরও উন্নত এনিমেশন এবং ট্রানজিশন ব্যবহার করতে আপনি AMP ইন্টারঅ্যাকশন এবং স্ক্রিপ্টিং টুলস ব্যবহার করতে পারেন। AMP স্টোরিতে সাধারণত ট্রানজিশন এফেক্ট এবং অটোমেটিক ট্রানজিশন ব্যবহৃত হয়। এটি ব্যবহারকারীকে এক পৃষ্ঠা থেকে অন্য পৃষ্ঠায় অটোমেটিকভাবে নিয়ে যায়।
Auto Transition Example
<amp-story standalone title="Story with Auto Transition" publisher="Your Publisher" publisher-logo-src="logo.png">
<amp-story-page id="page1">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.com/image.jpg" width="720" height="1280" layout="responsive"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Story Title</h1>
<p>This page will automatically transition after a few seconds.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page2">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.com/another-image.jpg" width="720" height="1280" layout="responsive"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Second Page</h1>
<p>Text for second page.</p>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page id="page3">
<amp-story-grid-layer template="fill">
<amp-img src="https://example.com/final-image.jpg" width="720" height="1280" layout="responsive"></amp-img>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Last Page</h1>
<p>Story ends here!</p>
</amp-story-grid-layer>
</amp-story-page>
</amp-story>এটি একটি স্টোরি তৈরির উদাহরণ, যেখানে পৃষ্ঠাগুলি স্বয়ংক্রিয়ভাবে একে অপরের সাথে ট্রানজিশন হয়। AMP স্টোরি ট্রানজিশনের জন্য আপনার কোনো অতিরিক্ত কনফিগারেশন বা কোড প্রয়োজন হয় না, এটি স্বয়ংক্রিয়ভাবে কাজ করে।
সারাংশ
AMP Story Layout এবং Animation এর মাধ্যমে আপনি ওয়েব পেজে একটি ইন্টারঅ্যাক্টিভ এবং দৃষ্টিনন্দন কন্টেন্ট স্টোরি তৈরি করতে পারেন। এর মাধ্যমে ব্যবহারকারীরা একটি নতুন অভিজ্ঞতা লাভ করেন যেখানে ছবি, ভিডিও, এবং টেক্সট একটি সুন্দরভাবে সজ্জিত আকারে প্রদর্শিত হয় এবং
স্বয়ংক্রিয়ভাবে ট্রানজিশন হয়। AMP স্টোরি পেজগুলো মোবাইল ডিভাইসে দ্রুত লোড হয় এবং এটি খুবই জনপ্রিয় হচ্ছে মিডিয়া, সংবাদ, ব্লগ এবং ব্র্যান্ড স্টোরি পেজে।
Read more
